<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}

			#imgPreview {
				position: fixed;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 997;
			}

			#imgPreview .bg {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 998;
			}

			#imgPreview .viewer {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				z-index: 999;
			}

			#imgPreview .imgbox {
				width: 80%;
				height: 90%;
				margin-top: 1%;
				margin-left: 10%;
			}

			#imgPreview .action-bar {
				text-align: right;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<!-- <iframe src="http://121.4.36.167:8080/webroot/help/%E6%96%87%E4%BB%B6/%E5%B7%A5%E5%8E%82/202207/A0001/A.png" frameborder="0"></iframe> -->
		<div id="imgPreview">
			<div class="bg"></div>
			<div class="viewer">
				<div class="action-bar">
					<button onclick="javascript:document.getElementById('imgPreview').style.display='none';">关闭</button>
				</div>
				<div class="imgbox">
					<img width="100%" height="100%"
						src="http://121.4.36.167:8080/webroot/help/%E6%96%87%E4%BB%B6/%E5%B7%A5%E5%8E%82/202207/A0001/A.png"
						alt="">
				</div>
			</div>
		</div>
	</body>


	<script>
		(function(document){
			var imgPreviewer = {
				instance: null,
				_init: function() {
					this._initBox();
					let bg = this._createBg()
					let viewer = this._createViewer()
					this.instance.appendChild(bg)
					this.instance.appendChild(viewer)
					document.body.appendChild(this.instance);
				},
				_initBox: function() {
					if (this.instance == null) {
						let i = document.createElement("div");
						i.setAttribute("id", "imgPreview")
						i.style.cssText = "position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 997;"
						this.instance = i;
					}
				},
				_createBg: function() {
					let bg = document.createElement("div");
					bg.style.cssText =
						"position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 998;"
					return bg;
				},
				_createViewer:function(){
					let viewer = document.createElement("div");
					viewer.style.cssText="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 999;"
					//创建操作按钮
					let actionBar = document.createElement("div");
					actionBar.style.cssText = "text-align: right;padding: 5px;";
					viewer.appendChild(actionBar);
					//创建图片显示容器
					let imgbox = document.createElement("div");
					imgbox.style.cssText="width: 80%;height: 90%;margin-top: 1%;margin-left: 10%;"
					//创建img
					let img = document.createElement("img");
					img.setAttribute()
					
					viewer.appendChild(imgbox);
					return viewer;
				},
				listen:function(){
					
				}
			}
		})(document)
	</script>
</html>
